import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Modal, Input, Radio, message } from 'antd';
import req from '@/http/request';
import url from '@/config/url';
const App = forwardRef((props, ref) => {
    let [userinfo, setUserInfo] = useState({
        username: '',
        password: '',
        email: '',
        gender: 1,
        mobile: ''
    });

    // 点击确定
    const handleOk = () => {
        // 显示模态框
        props.showModalFn()
        // 判断是添加确认? 还是修改确认?
        //console.log(props.title);
        if(props.title==='添加用户'){
            // 调用添加用户接口
            req.post(url.addUser, userinfo).then(res => {
                //console.log(res);
                if (res.data.errNo === 0) {
                    // 添加成功
                    message.success('添加成功', 1, () => {
                        // 重新调用用户列表
                        props.fun(1)
                    })
    
                } else {
                    message.error('添加失败', 1)
                }
            })
        }else if(props.title==='修改用户'){
            // 调用修改用户接口
            // console.log(userinfo);
            // console.log(props.current);
            req.put(url.editUser+userinfo.id,userinfo).then(res=>{
                //console.log(res);
                if(res.data.errNo===0){
                    message.success('修改成功',1,()=>{
                        // 刷新当前页数据
                        props.fun(props.current)
                    })
                }else {
                    message.error('修改失败', 1)
                }
           })
        
        }


    };

    const handleCancel = () => {
        // 显示模态框
        props.showModalFn()

    };
    // 性别切换
    const onChangeFn = (e) => {
        const keyname = e.target.name
        //console.log(keyname);
        // console.log(e.target.value);
        setUserInfo((m) => {
            if (keyname === 'mobile') {
                m[keyname] = Number(e.target.value)
            } else {
                m[keyname] = e.target.value
            }
            return m
        })
    };

    useImperativeHandle(ref, () => { return { setUserInfo } })

    return (
        <>
            <Modal title={props.title} visible={true} onOk={handleOk} onCancel={handleCancel}>
                {/*给表单设置key属性,这样当defaultValue属性发生改变,key值改变,当前元素就会更新,key值不变,默认不会重新更新 */}
                <p><Input placeholder="用户名" name='username' defaultValue={userinfo.username} key={userinfo.username}  onChange={onChangeFn} /></p>
                <p><Input placeholder="密码" name='password' defaultValue={userinfo.password} key={userinfo.password}  onChange={onChangeFn} /></p>
                <p><Input placeholder="邮箱" name='email' defaultValue={userinfo.email} key={userinfo.email} onChange={onChangeFn} /></p>
                <div>
                    <Radio.Group onChange={onChangeFn} name='gender' defaultValue={userinfo.gender} key = {userinfo.gender}>
                        <Radio value={1}>男</Radio>
                        <Radio value={2}>女</Radio>
                        <Radio value={3}>保密</Radio>
                    </Radio.Group>
                </div>
                <p><Input placeholder="手机号" name='mobile' defaultValue={userinfo.mobile} key= {userinfo.mobile} onChange={onChangeFn} /></p>
            </Modal>
        </>
    );
});


export default App;